<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/jquery-ui-1.8.21.custom.css">
<link rel="stylesheet" href="resources/css/cbnudrag.css">
<script src="resources/js/jquery-1.7.2.min.js"></script>
<script src="resources/js/jquery-ui-1.8.21.custom.min.js"></script>
</head>
<body>
<div id="maze">
	<div id="drag"></div>
	<div id="start"></div>
	<div id="end"></div>
</div>

<script type="text/javascript">
			$(function(){
				var dragOption = {										
						containment: "#maze"
					},
					endOption = {											
						over: function(e, ui) {
							$("#drag").draggable("destroy").remove();
							alert(" 성공!");
						}
					},
					wallOption = {															
						tolerance: "touch",
						over: function(e, ui) {
							$("#drag").draggable("destroy").remove();

							$("<div />", {
								id: "drag",
								css: {
									left: 15,
									top: 0
								}
							 }).appendTo("#maze");				

							 $("#drag").draggable(dragOption);	
						}
					};

				for (var x = 1; x < 47; x++) {					
					$("<div />", {
						id: "cbnu" + x,
						class: "wall"
					}).appendTo("#maze");
				}

				$("#drag").draggable(dragOption);			
				$("#end").droppable(endOption);
				$(".wall").droppable(wallOption);		
			});		
		</script>
</body>
</html>